Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style collapsing sidebar #3322

Merged
merged 1 commit into from
Nov 4, 2019
Merged

Style collapsing sidebar #3322

merged 1 commit into from
Nov 4, 2019

Conversation

mfrecchiami
Copy link
Contributor

@mfrecchiami mfrecchiami commented Aug 30, 2019 •
edited by kennyadsl
Loading

Ref. to @seand7565 PR: #3166
Closes #2961

In the first prototype about this new feature, I want to let the Solidus mark only when the sidebar was collapsed; but then I remember that the logo on header is customizable and many times there are no mark (or no pretty ways) to show in a small place.
So I opted to leave the logo container always visible, also when the user choose to collapse the sidebar: so, no matter if you've uploaded a custom logo or not, and furthermore you know always which admin area you are logged in.

Also the languages select shows in a smart way when the sidebar is collapsed.

uncollapsed

collapsed

collapsing-nav720

@mfrecchiami mfrecchiami mentioned this pull request Sep 6, 2019
Closed
4 tasks
jacobherrington
jacobherrington approved these changes Sep 6, 2019
View reviewed changes
Copy link
Contributor

@jacobherrington jacobherrington left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me! Thanks @mfrecchiami!

tvdeyen
tvdeyen reviewed Sep 6, 2019
View reviewed changes
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesone, thanks! Nice trick on the still selectable language 👌

Some small things I found while testing this locally

  1. The language name is not fully hidden if the menu is collapsed (at least with Firefox)
  2. The chevron is the other way round if I collapsed the sidebar and reload the page
  3. The globe is not a icon for "choose language" there is an "offical one"
  4. The icons in the lower left area do not have the same color as the main menu items (this might be a problem within solidus_auth_devise?)

Screen Shot 2019-09-06 at 17 41 16

@mfrecchiami
Copy link
Contributor Author

mfrecchiami commented Sep 6, 2019 •
edited
Loading

Hi @tvdeyen thanks for your feedback!

  • "choose language" official icon: we evaluated it but icons in the sidebar are really small and this official icon is pretty detailed and we thought that was better choose something simpler (like the globe). Maybe we could consider to resize menu icons, but I'm not so sure that the language icon will display better than now. (In any case I'll try to do it and will send some screenshots with these changes 😉 )

  • The icons in the lower left area do not have the same color as the main menu items: I didn't change it and I think that it was done at the beginning to differentiate the two types of menus, and also because the "user" icon is the same icon used for UserS in the main menu, I guess.

We should update the UserS icon with this one: https://fontawesome.com/v4.7.0/icon/users
but, again, we should to consider to resize the menu icons;
we could also think about another background color for the bottom left menu.

In any case I would split the restyle of bottom left menu, in another PR.

TODO:

  • Hide the Language name if sidebar is collapsed [test it on main browsers]
  • The chevron is the other way round if I collapsed the sidebar and reload the page

🙏 thank you

@mfrecchiami mfrecchiami force-pushed the mfrecchiami/style-collapsing-sidebar branch from afee0e1 to 0e8eb8f Compare September 13, 2019 16:24
@mfrecchiami
Copy link
Contributor Author

mfrecchiami commented Sep 13, 2019 •
edited
Loading

Hi @tvdeyen !
I fixed the two issues on TODO list 💪
Now, I'm changing the language icon (globe to official icon). I attach two screenshots, one with the globe icon and one with the language icon; I think that the globe one is more readable than the official one. What do you think?

globe-icon

official-language-icon

@mfrecchiami mfrecchiami force-pushed the mfrecchiami/style-collapsing-sidebar branch from 0e8eb8f to 81b3442 Compare September 13, 2019 16:46
@tvdeyen
Copy link
Member

tvdeyen commented Sep 13, 2019 •
edited
Loading

You are right. The globe looks better than the official icon. I thought Font Awesome also has a version of the official icon, but they don’t. That’s good for now. Thanks for making these two screens. That really helped to make the decision.

I also agree we should move the styling of the bottom menu into a separate PR. And I agree on that we should use larger icons in the main menu as well. But this is also something for later.

Again. Great work on this PR.

spaghetticode
spaghetticode approved these changes Sep 20, 2019
View reviewed changes
Copy link
Member

@spaghetticode spaghetticode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mfrecchiami @seand7565 thank you for this great addition 👏
It looks good to me, but I left a few non-blocking nitpicks

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss Outdated Show resolved Hide resolved
backend/app/assets/stylesheets/spree/backend/components/_navigation.scss Outdated Show resolved Hide resolved
backend/app/assets/stylesheets/spree/backend/components/_navigation.scss Outdated Show resolved Hide resolved
@mfrecchiami mfrecchiami force-pushed the mfrecchiami/style-collapsing-sidebar branch from 81b3442 to a51644e Compare September 20, 2019 12:14
@jacobherrington jacobherrington mentioned this pull request Sep 23, 2019
Closed
5 tasks
@spaghetticode spaghetticode added the release:major Breaking change on hold until next major release label Oct 22, 2019
@kennyadsl kennyadsl force-pushed the mfrecchiami/style-collapsing-sidebar branch from a51644e to 3fa5c8a Compare October 25, 2019 11:56
@kennyadsl kennyadsl mentioned this pull request Oct 25, 2019
Merged
@kennyadsl
Copy link
Member

We found some visual bugs with this PR that we are trying to solve into nebulab#28.

Once ready, for this PR, I suggest creating a single commit co-authored with everyone involved. We have a lot of commits here but they are kinda reverting each other work several times so I don't think it's actually helping browsing git history. Let me know your thoughts on this. 🙂

@kennyadsl kennyadsl force-pushed the mfrecchiami/style-collapsing-sidebar branch from 3fa5c8a to 65a017d Compare October 30, 2019 13:41
@kennyadsl
Copy link
Member

Done, I removed transitions for now since they conflict with the jQuery plugin that handles the sticky sidebar elements when a long page is totally scrolled down. I had a real-life conversation with @davidedistefano about this and we both think we can add back transition with other PRs later.

This is ready to go in my opinion, I'd just wait @seand7565 @mfrecchiami @jacobherrington and @tvdeyen opinion on squashing commits into a single co-authored one.

@kennyadsl @mfrecchiami
@seand7565 @tvdeyen @jacobherrington
Allow admin sidebar to be collapsible
b8e85fb 
This will add extra space in smaller devices.

We are setting a cookie via JS to remember user preferences
throught users navigation.

Co-authored-by: Michela Frecchiami <michela.frecchiami@gmail.com>
Co-authored-by: Sean <seand7565@gmail.com>
Co-authored-by: Thomas von Deyen <thomas@vondeyen.com>
Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>
@kennyadsl kennyadsl force-pushed the mfrecchiami/style-collapsing-sidebar branch from 24c5373 to b8e85fb Compare November 4, 2019 15:38
@kennyadsl kennyadsl merged commit a09bb24 into solidusio:master Nov 4, 2019
@kennyadsl kennyadsl deleted the mfrecchiami/style-collapsing-sidebar branch November 4, 2019 16:20
@kennyadsl
Copy link
Member

Thanks to anyone involved in shipping this feature. We made it! 🎉

vassalloandrea added a commit to solidusio-contrib/solidus_gdpr that referenced this pull request Nov 8, 2019
@vassalloandrea
Maximize the browser dimens to run the tests with the expanded sidebar
63fbcd0 
In the Solidus admin, the admin nav menu or sidebar can be collapsed since
this was merged: solidusio/solidus#3322
The expansion and the constriction is based on browser dimensions,
cookies and user interactions.
@kennyadsl kennyadsl removed the release:major Breaking change on hold until next major release label Apr 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@houndci-bot houndci-bot houndci-bot left review comments

@kennyadsl kennyadsl kennyadsl left review comments

@tvdeyen tvdeyen tvdeyen left review comments

@jacobherrington jacobherrington jacobherrington approved these changes

@spaghetticode spaghetticode spaghetticode approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The navigation menu should be a collapsible
6 participants
@mfrecchiami @tvdeyen @kennyadsl @spaghetticode @houndci-bot @jacobherrington